import ProForm, { ProFormText } from '@ant-design/pro-form';
import { Row, Image, Spin, Button, message, Col } from 'antd';
import { useMount, useRequest } from 'ahooks';
import { login, fetchCaptcha } from '@/service/login';
import styles from './index.scss';
import { required } from '@/utils/form/rules';
import { BASE_URL } from '@/service';
import { history } from 'umi';
const captchaURL = BASE_URL + '/captcha';
export default function Login() {
    const { run, loading } = useRequest(async function loginHandler(
        values: any,
    ) {
        const res = await login({ ...values });
        if (res.code !== 200) {
            message.error(res.msg);
            return;
        }
        localStorage.setItem('user', JSON.stringify(res.data));
        history.push('/');
        message.success('登录成功');
    });

    return (
        <div className={styles.root}>
            <Spin spinning={loading}>
                <div className={styles.loginModal}>
                    <div>
                        <h2 className={styles.loginTitle}>后台管理系统</h2>
                        <ProForm
                            submitter={false}
                            layout="vertical"
                            onFinish={async (values) => {
                                run(values);
                            }}
                        >
                            <ProFormText
                                name="account"
                                // label="帐号"
                                placeholder="请输入帐号"
                                rules={[required('帐号不能为空')]}
                            />

                            <ProFormText.Password
                                name="password"
                                // label="密码"
                                placeholder="请输入密码"
                                rules={[required('帐号不能为空')]}
                            />

                            {/* <ProForm.Group 
                            // label="验证码"
                            > */}
                            <Row gutter={24}>
                                <Col span={18}>
                                    <ProFormText
                                        style={{ height: '40px' }}
                                        placeholder="请输入验证码"
                                        name="code"
                                    ></ProFormText>
                                </Col>
                                <Col span={6}>
                                    <Image
                                        height={32}
                                        src={captchaURL}
                                        onClick={(e) => {
                                            (
                                                e.target as HTMLImageElement
                                            ).src = `${captchaURL}?${Math.random()}`;
                                        }}
                                        preview={false}
                                    ></Image>
                                </Col>
                            </Row>
                            {/* </ProForm.Group> */}
                            <Row>
                                <Button
                                    type="primary"
                                    style={{
                                        width: '100%',
                                        background:
                                            'linear-gradient(30deg,#61C0FF,#402FFF )',
                                        height: '40px',
                                    }}
                                    htmlType="submit"
                                >
                                    登录
                                </Button>
                            </Row>
                        </ProForm>
                    </div>
                </div>
            </Spin>
        </div>
    );
}
